<script setup>
import { ref, getCurrentInstance } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()
const add = ref('')

const onSearch = () => {
  if (add.value == '') {
    return false
  }

  var param = {
    "content": add.value
  }

  proxy.$axios.post("/api/Scan/Search", param).then((res) => {
    console.log(res)
    if (res.code == 'Success') {
      if (res.data.type === 'BlockNumber') {
        router.push(`/block/${add.value}`)
      } else if (res.data.type === 'Address') {
        router.push(`/address/${add.value}`)
      } else if (res.data.type === 'Hash') {
        router.push(`/tx/${add.value}`)
      } else {
        router.push(`/error?a=${add.value}`)
      }
      add.value = ''
    }
  })
}

const enterToLogin = (e) => {
  // alert(e.keyCode)
  if (e.keyCode == 13) {
    onSearch()
  }
}
const updateValue = (e) => {
  add.value = e.target.value
}
</script>

<template>
  <div class="tit_box">
    <slot></slot>
    <div class="select_box">
      <input id="txtSearchInput" type="text" :value="add" @input="updateValue" @keydown="enterToLogin"
        placeholder="Search by Address / Txn Hash / Block / Token / Ens" maxlength="68" />
      <el-button :icon="Search" circle @click="onSearch" />
      <!-- <button @click="onSearch">
        <span class="glyphicon glyphicon-search"></span>
      </button> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
.tit_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
}

.select_box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F2F2F7;
  border-radius: 8px;
  height: 40px;
  width: 400px;
  color: #202632;
  padding: 4px;
  border: 1px solid #E5E5EA;


  input {
    min-width: 150px;
    padding-left: 15px;
    margin-right: 15px;
    line-height: 30px;
    height: 30px;
    flex: auto;
    max-width: 600px;
    background-color: #F2F2F7;
    color: var(--color-text);

    &::placeholder {
      color: #8F9399;
      /* 灰色的占位符文字 */
      letter-spacing: 1px;
      font-size: 0.75rem;
    }
  }

  button {
    // float: left;
    // width: 44px;
    flex: 0 0 32px;
    line-height: 32px;
    // background: #ccc;
    border-radius: 5px;

    span {
      color: #fff;
    }
  }
}
</style>
